<template>
  <div id="add">
    <h2>当前求和为:{{ sum }}</h2>
    <h2>当前求和为10倍时:{{ bigSum }}</h2>
    <h2>我喜欢{{ school }},学习{{ subject }}</h2>
    <!-- 双向绑定 用户输入什么值来控制value的值 -->
    <select v-model="n">
      <!-- 想要强行把值改成数字型 在value前面加冒号 -->
      <option :value="1">1</option>
      <option :value="2">2</option>
      <option :value="3">3</option>
    </select>
    <button @click="JIA(n)">+</button>
    <button @click="JIAN(n)">-</button>
    <button @click="jiaadd(n)">当前和为奇数再加</button>
    <button @click="jiawait(n)">等一等再加</button>
  </div>
</template>

<script>
// 辅助工具 mapState,mapGetters
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
export default {
  data() {
    return {
      n: 1,
    };
  },
  computed: {
    // sum() {
    //   return this.$store.state.sum;
    // },
    // school() {
    //   return this.$store.state.school;
    // },
    // subject() {
    //   return this.$store.state.subject;
    // },
    // ...mapState({ sum: "sum", school: "school", subject: "subject" }),
    ...mapState(["sum", "school", "subject"]),
    /* --------------------------------------------- */
    // bigSum() {
    //   return this.$store.getters.bigSum;
    // },
    // ...mapgetters({ bigSum: "bigSum" }),
    ...mapGetters(["bigSum"]),
  },
  methods: {
    // add() {
    //   this.$store.dispatch("jia", this.n);
    // },
    // jian() {
    //   this.$store.dispatch("jian", this.n);
    // },
    // ...mapMutations({ add: "JIA", jian: "JIAN" }),
    ...mapMutations(["JIA", "JIAN"]),
    /* ---------------------------------------- */

    // jiaadd() {
    // if (this.$store.state.sum % 2) {
    //   this.$store.dispatch("jia", this.n);
    // }
    // this.$store.dispatch("jiaadd", this.n);
    // },
    // jiawait() {
    // setTimeout(() => {
    //   this.$store.dispatch("jia", this.n);
    // }, 500);

    //   this.$store.dispatch("jiawait", this.n);
    // },
    // ...mapActions({ jiaadd: "jiaadd", jiawait: "jiawait" }),
    ...mapActions(["jiaadd", "jiawait"]),
  },
};
</script>

<style>
</style>